<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>生日快乐</title>

    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>
<audio src = "/songs/happy_birthday.mp3" autoplay loop></audio>
<div class="banner-box">
	<div class="bd">
        <ul>          	    
            <li>
                <div class="m-width">
                <a href="javascript:void(0);"><img src="images/img1.jpg" style = "width: 100%; height: 100%;"/></a>
                </div>
            </li>
            <li>
                <div class="m-width">
                <a href="javascript:void(0);"><img src="images/img2.jpg" style = "width: 100%; height: 100%;"/></a>
                </div>
            </li>
            <li>
                <div class="m-width">
                <a href="javascript:void(0);"><img src="images/img3.jpg" style = "width: 100%; height: 100%;"/></a>
                </div>
            </li>
        </ul>
    </div>
    <div class="banner-btn">
        <a class="prev" href="javascript:void(0);"></a>
        <a class="next" href="javascript:void(0);"></a>
    </div>
</div>

<script type="text/javascript">
var imgs = $('img');
var body = $('body')[0];
$(document).ready(function(){
    window.onresize = function(){
        imgs.each(function imgs_resize (){
            this.style.width = body.clientWidth.toString() + 'px';
            this.style.height = body.clientHeight.toString() + 'px';
        })
    };
    window.onresize();
	$(".prev,.next").hover(function(){
		$(this).stop(true,false).fadeTo("show",0.9);
	},function(){
		$(this).stop(true,false).fadeTo("show",0.4);
	});
	
	$(".banner-box").slide({
		titCell:".hd ul",
		mainCell:".bd ul",
		effect:"fold",
		interTime:35000,
		delayTime:500,
		autoPlay:false,
		autoPage:true, 
		trigger:"click",
        pnLoop:false
	});

});
</script>
</body>
</html>
